<template>
	<div class="container" @click="handleGallaryClick">
		<div class="wrapper">
			<swiper :options="swiperOptions">
				<swiper-slide>
					<img class="gallary-img" v-for="(item,index) in imgs" :key="index" :src="item" />
				</swiper-slide>
				<div class="swiper-pagination" slot="pagination"></div>
			</swiper>
		</div>
	</div>
</template>


<script>
export default {
  name:'CommonGrllary',
  props:{
    imgs:{
      type:Array,
      default(){
        return []
      }
    },
  },
  data() {
    return {
      swiperOptions:{
        pagination:'.swiper-pagination',
        paginationType:'fraction',
        observeParemts:'true',
        observer:'true'
      }
    }
  },
  methods: {
    handleGallaryClick () {
      this.$emit('close')
    }
  },
}
</script>


<style lang="stylus" scoped>
.container >>> .swiper-pagination {
  overflow: inherit;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  z-index: 99;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #000;

  .wrapper {
    width: 100%;
    height: 0;
    padding: bottom 100%;

    .grllary-img {
      width: 100%;
    }

    .swiper-pagination {
      color: #fff;
      bottom: -1rem;
    }
  }
}
</style>